<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags-->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="au theme template">
		<meta name="author" content="Hau Nguyen">
		<meta name="keywords" content="au theme template">

		<title>网页设计与制作仿真效果操作网站-盒子模型</title>

		<!-- Fontfaces CSS-->
		<link href="../css/font-face.css" rel="stylesheet" media="all">
		<link href="../vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
		<link href="../vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
		<link href="../vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">

		<!-- Bootstrap CSS-->
		<link href="../vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">

		<!-- Vendor CSS-->
		<!-- <link href="../vendor/animsition/animsition.min.css" rel="stylesheet" media="all"> -->
		<link href="../vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
		<link href="../vendor/wow/animate.css" rel="stylesheet" media="all">
		<link href="../vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
		<link href="../vendor/slick/slick.css" rel="stylesheet" media="all">
		<link href="../vendor/select2/select2.min.css" rel="stylesheet" media="all">
		<link href="../vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">

		<!-- Main CSS-->
		<link href="../css/theme.css" rel="stylesheet" media="all">
		<link rel="stylesheet" type="text/css" href="../css/boc_con.css" />
		<link rel="stylesheet" type="text/css" href="../css/box.css" />
	</head>
	<body class="animsition">
		<div class="page-wrapper">
			<!-- MENU SIDEBAR-->
			<aside class="menu-sidebar d-none d-lg-block">
				<div class="logo">
					<a href="#">
						<img src="../images/icon/logo.png" alt="Cool Admin" />
					</a>
				</div>
			<div class="menu-sidebar__content js-scrollbar1">
					<nav class="navbar-sidebar">
						<ul class="list-unstyled navbar__list">
							<li class="active has-sub">
								<a class="js-arrow" href="index.html">
									<i class="fas fa-tachometer-alt"></i>我的信息</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="askqustion.html">我的问题</a>
									</li>
									<li>
										<a href="index.html">我的数据</a>
									</li>
							
								</ul>
							</li>
							<li class="active has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-tachometer-alt"></i>项目1html标签</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="htmlControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="htmltest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-tachometer-alt"></i>项目2CSS样式</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="CSSControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="CSStest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
			
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-desktop"></i>项目3盒子模型</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="boxControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="boxtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-align-justify"></i>项目4弹性布局</a>
			
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="flexControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="transformtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
			
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-square"></i>项目5背景与外观</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="backgroundControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="backgtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-pie-chart"></i>项目6精灵图设置</a>
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="spriteControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="spritetest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-spinner fa-pulse"></i>项目7动画技术</a>
			
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="animateControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="animatetest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
			
							</li>
							<li class="has-sub">
								<a class="js-arrow" href="#">
									<i class="fas fa-adjust"></i>项目8变形与过渡</a>
								 
			
								<ul class="list-unstyled navbar__sub-list js-sub-list">
									<li>
										<a href="transformControl.html"><i class="fas fa-cog"></i>实训操作练习</a>
									</li>
									<li>
										<a href="transformtest.html"><i class="fas fa-file"></i>测试练习</a>
									</li>
			
								</ul>
			
							</li>
						</ul>
					</nav>
				</div>
			
				</aside>
			<!-- END MENU SIDEBAR-->

			<!-- PAGE CONTAINER-->
			<div class="page-container">
				<header class="header-desktop">
					<div class="section__content section__content--p30">
						<div class="container-fluid">
							<div class="header-wrap">
								<form class="form-header" action="" method="POST">
									<input class="au-input au-input--xl" type="text" name="search"
										placeholder="Search for datas &amp; reports..." />
									<button class="au-btn--submit" type="submit">
										<i class="zmdi zmdi-search"></i>
									</button>
								</form>
								<div class="header-button">
									<div class="noti-wrap">
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-comment-more"></i>
											<span class="quantity">1</span>
										</div>
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-email"></i>
											<span class="quantity">1</span>
										</div>
										<div class="noti__item js-item-menu">
											<i class="zmdi zmdi-notifications"></i>
											<span class="quantity">3</span>
										</div>
									</div>
									<div class="account-wrap">
										<div class="account-item clearfix js-item-menu">
											<div class="image">
												<img src="../images/icon/avatar-01.jpg" alt="***" />
											</div>
											<div class="content">
												<a class="js-acc-btn" href="#">***</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</header>
				<!-- HEADER DESKTOP-->

				<!-- MAIN CONTENT-->
				<div class="main-content">

					<!-- MAIN CONTENT-->
					<div class="main-content" style="  padding: 20px;">
						<div class="section__content ">
							<div class="container-fluid">
								<div class="row" style="display: flex;">

									<div class="col-lg-3">
										<div class="card">
											<div class="card-header">
												<strong>盒子模型</strong>元素练习
											</div>
											<div class="card-body card-block">
												<form action="" method="post" enctype="multipart/form-data"
													class="form-horizontal">

													<div class="row form-group">
														<div class="col col-md-3">
															<label for="text-input"
																class=" form-control-label ">width</label>
														</div>
														<div class="col-12 col-md-9">

															<input type="text" id="text-width" name="width"
																placeholder="盒子宽度" class="form-control">


														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-3">
															<label for="email-input"
																class=" form-control-label">height</label>
														</div>
														<div class="col-12 col-md-9">
															<input type="text" id="text-height" name="height"
																placeholder="盒子高度" class="form-control">

														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-4">
															<label for="password-input" class=" form-control-label"
																style="text-align: right;">margin</label>
														</div>
														<div class="col-12 col-md-8">
															<input type="text" id="text-margin" name="margin"
																placeholder="外边距" class="form-control">

														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="disabled-input"
																class=" form-control-label">margin</label>
														</div>
														<div class="col-12 col-md-12">
															<input type="text" id="text-margin-top" name="margin-top"
																placeholder="top" class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="text" id="text-margin-right"
																name="margin-right" placeholder="right"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="text" id="text-margin-bottom"
																name="margin-bottom" placeholder="bottom"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="text" id="text-margin-left" name="margin-left"
																placeholder="left" class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-4">
															<label for="password-input" class=" form-control-label"
																style="text-align: right;">padding</label>
														</div>
														<div class="col-12 col-md-8">
															<input type="text" id="text-padding" name="padding"
																placeholder="内边距" class="form-control">

														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="disabled-input"
																class=" form-control-label">四周内边距</label>
														</div>
														<div class="col-12 col-md-12">
															<input type="text" id="text-padding-top" name="padding-top"
																placeholder="top" class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="text" id="text-padding-right"
																name="padding-right" placeholder="right"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="text" id="text-padding-bottom"
																name="padding-bottom" placeholder="bottom"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="text" id="text-padding-left"
																name="padding-left" placeholder="left"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
														</div>
													</div>

													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label"
																style="text-align: right;">border</label>
														</div>
														<div class="col-12 col-md-12">
															<input type="text" id="text-border-width"
																name="border-width" placeholder="width"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="color" id="text-border-color"
																name="border-color" class="form-control"
																style="width: 20%; float: left;margin-right: 2%; height: 40px;">

															<select name="select" id="select-border-style"
																class="form-control"
																style="width: 50%; float: left;margin-right: 2%;">
																<option value="0">Please select</option>
																<option value="1">dashed</option>
																<option value="2"> solid </option>

																<option value="3">dotted</option>
															</select>

														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label"
																style="text-align: right;">border-top</label>
														</div>
														<div class="col-12 col-md-12">
															<input type="text" id="border-top-width"
																name="border-top-width" placeholder="width"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="color" id="border-top-color"
																name="border-top-color" class="form-control"
																style="width: 20%; float: left;margin-right: 2%; height: 40px;">

															<select name="select" id="select-border-top"
																class="form-control"
																style="width: 50%; float: left;margin-right: 2%;">
																<option value="0">Please style</option>
																<option value="1">dashed</option>
																<option value="2"> solid </option>
																<option value="3">doubled</option>
																<option value="3">dotted</option>
															</select>

														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label"
																style="text-align: right;">border-right</label>
														</div>
														<div class="col-12 col-md-12">
															<input type="text" id="border-right-width"
																name="border-right-width" placeholder="width"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="color" id="border-right-color"
																name="border-right-color" class="form-control"
																style="width: 20%; float: left;margin-right: 2%; height: 40px;">

															<select name="select" id="select-border-right"
																class="form-control"
																style="width: 50%; float: left;margin-right: 2%;">
																<option value="0">Please style</option>
																<option value="1">dashed</option>
																<option value="2"> solid </option>
																<option value="3">doubled</option>
																<option value="3">dotted</option>
															</select>

														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label"
																style="text-align: right;">border-bottom</label>
														</div>
														<div class="col-12 col-md-12">
															<input type="text" id="border-bottom-width"
																name="border-bottom-width" placeholder="width"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="color" id="border-bottom-color"
																name="border-bottom-color" class="form-control"
																style="width: 20%; float: left;margin-right: 2%; height: 40px;">

															<select name="select" id="select-border-bottom"
																class="form-control"
																style="width: 50%; float: left;margin-right: 2%;">
																<option value="0">Please style</option>
																<option value="1">dashed</option>
																<option value="2"> solid </option>
																<option value="3">doubled</option>
																<option value="3">dotted</option>
															</select>
														</div>
													</div>
													<div class="row form-group">
														<div class="col col-md-12">
															<label for="password-input" class=" form-control-label"
																style="text-align: right;">border-left</label>
														</div>
														<div class="col-12 col-md-12">
															<input type="text" id="border-left-width"
																name="border-left-width" placeholder="width"
																class="form-control"
																style="width: 20%; float: left;margin-right: 2%;">
															<input type="color" id="border-left-color"
																name="border-left-color" class="form-control"
																style="width: 20%; float: left;margin-right: 2%; height: 40px;">

															<select name="select" id="select-border-left"
																class="form-control"
																style="width: 50%; float: left;margin-right: 2%;">
																<option value="0">Please style</option>
																<option value="1">dashed</option>
																<option value="2"> solid </option>
																<option value="3">doubled</option>
																<option value="3">dotted</option>
															</select>
														</div>
													</div>
													<div class="row form-group">
														<div>
															<a href=""><img src="../images/game.png" width="90%"></a>
														</div>
													</div>
												</form>
											</div>

										</div>

									</div>
									<div class="col-lg-9">
										<div class="card">
											<div class="card-header">
												<strong>盒子模型</strong>显示效果
											</div>
											<div class="card-body card-block  box_con">
												<div class="clearfix">
													<div id="box_exzample" class="box_exzample">



														<div class="box-big">

															<div class="box-center1">

																<div class="box-2">
																	<div class="box-yellow">
																		<img src="../images/box/mengxiang.jpg">
																	</div>
																</div>
																<div class="box-2">
																	<div class="box-yellow">
																		<img src="../images/box/mengxiang.jpg">
																	</div>
																</div>
																<div class="box-2">
																	<div class="box-yellow">
																		<img src="../images/box/mengxiang.jpg">
																	</div>
																</div>
															</div>

														</div>



													</div>

												</div>


											</div>

										</div>

									</div>

								</div>
								<div class="row">
									<div class="col-md-12">
										<div class="copyright">
											<p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank"
													href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<!-- Jquery JS-->
		<script src="../vendor/jquery-3.2.1.min.js"></script>
		<!-- Bootstrap JS-->
		<script src="../vendor/bootstrap-4.1/popper.min.js"></script>
		<script src="../vendor/bootstrap-4.1/bootstrap.min.js"></script>
		<!-- Vendor JS       -->
		<script src="../vendor/slick/slick.min.js">
		</script>
		<script src="../vendor/wow/wow.min.js"></script>
		<!-- <script src="../vendor/animsition/animsition.min.js"></script> -->
		<script src="../vendor/bootstrap-progressbar/bootstrap-progressbar.min.js">
		</script>
		<script src="../vendor/counter-up/jquery.waypoints.min.js"></script>
		<script src="../vendor/counter-up/jquery.counterup.min.js">
		</script>
		<script src="../vendor/circle-progress/circle-progress.min.js"></script>
		<script src="../vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
		<script src="../vendor/chartjs/Chart.bundle.min.js"></script>
		<script src="../vendor/select2/select2.min.js"></script>

		<!-- Main JS-->
		<script src="../js/main.js"></script>
		<script src="../js/jquery.bigcolorpicker.min.js"></script>
		<script src="../js/box.js"></script>
	</body>

</html>
<!-- end document-->
